<template>
  <div class="gift">
    <div class="gift_bg">
      <div class="swiper-warp">
        <div class="content">
          <swiper :options="swiperOption" ref="slider">
            <swiper-slide v-for="(slide,index) in swiperSlides" :key="index">
              <img class="slideImg" :src="slide.img" alt>
            </swiper-slide>
            <!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
            <!-- <div class="swiper-button-next" slot="button-next"></div> -->
          </swiper>
        </div>
      </div>
      <div class="btn" v-if="user.MemberOrder==5">
        <img src="./img/gift_Purchased.png" alt srcset>
      </div>
      <div v-else class="btn" @click="modePay">
        <img src="./img/gift_bag_receive_btn.png" alt srcset>
      </div>
      <i class="iconfont icon-guanbi" @click="goBack"></i>
      <div class="pay" v-show="isPayShow">
        <div class="main">
          <div class="title">
            <i @click="isPayShow=false" class="iconfont icon-guanbi"></i> 支付方式
          </div>
          <div id="alipay"></div>
          <div class="pay-item pay-libao" @click="clicklibao"></div>
          <div class="pay-item pay-ali" @click="clickPay"></div>
          <div class="pay-item pay-wx" v-if="Judge" @click="clickPayWx"></div>
          <!-- <div class="pay-item pay-wx"></div> -->
        </div>
      </div>
    </div>
    <div class="kb"></div>

    <div class="mask" v-if="isDonateMask">
      <div class="main">
        <div class="title">
          <div class="iconfont icon-guanbi" @click="isDonateMask=false"></div>礼包码验证
        </div>
        <p v-if="!user.TJUserGameID">
          <label for="p1">可选</label>
          <br>
          <input id="p1" type="text" placeholder="输入好友ID" v-model="userFriendID">
          <span>若不填写好友ID,则默认好友ID为系统用户</span>
        </p>
        <p :class="!user.TJUserGameID ? '':'pmt'">
          <label for="p2">必选*</label>
          <br>
          <input id="p2" type="text" placeholder="输入礼包码" v-model="libaoCode">
        </p>
        <div class="maskbtn" @click="verify">确定</div>
      </div>
    </div>
  </div>
</template>
<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { hex_md5 } from "../../utils/md5";
import { isAndroidOrIos, getGuid, isWeixin } from "../../utils/index";
import { webpay, getUserInfo, encryptWx, userByPayHY } from "../../api";
import { mapGetters } from "vuex";
import { Toast, MessageBox } from "mint-ui";
import axios from "axios";
import $ from "jquery";
import { pay } from "../../utils/wxPay";

export default {
  components: { swiper, swiperSlide },
  data() {
    return {
      isDonateMask: false,
      userFriendID: "",
      libaoCode: "",
      alipay: "",
      Judge: window.Judge,
      // Judge: 1,
      user: {},
      swiperOption: {
        loop: true,
        prevButton: ".swiper-button-prev",
        nextButton: ".swiper-button-next",
        onSlideChangeEnd: swiper => {
          this.swiperIndex = swiper.realIndex;
        }
      },
      swiperSlides: [
        {
          img: require("./img/gift_3.png"),
          id: "1"
        },
        {
          img: require("./img/gift_3.png"),
          id: "2"
        },
        {
          img: require("./img/gift_3.png"),
          id: "3"
        }
      ],
      swiperIndex: 0,
      isPayShow: false,
      zyGameID: localStorage.zyGameID
    };
  },
  computed: {},
  mounted() {
    this.getUser();
  },
  methods: {
    //

    // 礼包码支付
    clicklibao() {
      this.isDonateMask = true;
    },
    //礼包码验证 按钮
    verify() {
      // userFriendID
      if (!this.libaoCode) {
        Toast({
          message: "请输入礼包码",
          duration: 1000
        });
        return;
      }
      this.activateUser();
    },
    //使用礼包码激活用户  YJELQss 0：返回提示 1：确认充值
    activateUser() {
      userByPayHY({
        ID: localStorage.zyUserId,
        LoginMachine: getGuid(),
        RegType: "0",
        MS: this.userFriendID,
        MC: this.libaoCode,
        YJELQss: "",
        JYEPass: ""
      }).then(res => {
        Toast({
          message: res.data.Content,
          duration: 1000
        });
        this.isDonateMask = false;
        if (res.data.Success) {
          this.getUser();
        }
      });
    },

    getUser() {
      getUserInfo({ LoginMachine: getGuid(), ID: localStorage.zyUserId }).then(
        res => {
          if (res.data && res.data.Success) {
            this.user = res.data.EntityList[0];
          } else {
            Toast({
              message: res.data.Content,
              duration: 3000
            });
            // this.$router.push("/login");
          }
        }
      );
    },
    modePay() {
      if (isWeixin()) {
        MessageBox("提示", "请点击右上角按钮在浏览器里打开");
        return;
      }
      this.isPayShow = true;
    },
    goBack() {
      this.$router.push("/my");
    },
    clickPay() {
      let PayType = "2";
      if (isAndroidOrIos().isAndroid) {
        PayType = "1";
      } else if (isAndroidOrIos().isiOS) {
        PayType = "0";
      }
      let keystr = hex_md5(this.zyGameID + "," + PayType + "," + "11");
      webpay({
        // GameID: this.zyGameID,
        GameID: this.zyGameID,
        ProductID: "11",
        PayType: PayType,
        SinKey: keystr
      })
        .then(res => {
          console.log(res);
          document.getElementById("alipay").innerHTML = res.data.replace(
            /^.*?:"|\"}$/gi,
            ""
          );
          document.forms["alipaysubmit"].submit();
        })
        .catch(err => {
          //alert("err");
        });
    },
    clickPayWx() {
      let PayType = "2";
      if (isAndroidOrIos().isAndroid) {
        PayType = "1";
      } else if (isAndroidOrIos().isiOS) {
        PayType = "0";
      }

      if (window.Judge) {
        pay("wxpay", PayType, 11);
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
.gift {
  width: 100%;
  position: absolute;
  height: 13.8rem;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);

  .gift_bg {
    width: 100%;
    height: 100%;
    background: url('./img/giftbag_btm.png') no-repeat;
    background-size: 100%;

    .swiper-warp {
      width: 5.9rem;
      height: 2rem;
      position: absolute;
      left: 50%;
      top: 8rem;
      transform: translate(-50%, -50%);

      .content {
        width: 2.29rem;
        height: 1.84rem;
        margin: 0 auto;

        .slideImg {
          width: 2.29rem;
          height: 1.84rem;
          border-radius: 10px;
        }

        .slideTxt {
          width: 2.29rem;
          height: 0.5rem;
          line-height: 0.5rem;
          text-align: center;
          display: inline-block;
          background: rgba(255, 27, 88, 1);
          font-size: 14px;
          color: #FFF;
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;
        }
      }
    }

    .btn {
      width: 4.64rem;
      height: 1.24rem;
      line-height: 1.24rem;
      // background: url('./img/gift_bag_receive_btn.png');
      // background-size: 100% 100%;
      position: absolute;
      left: 50%;
      top: 9.8rem;
      transform: translate(-50%, -50%);

      img {
        width: 100%;
        height: 100%;
      }
    }

    .iconfont {
      font-size: 30px;
      position: absolute;
      color: #fff;
      left: 50%;
      top: 12.5rem;
      transform: translate(-50%, -50%);
    }

    .pay {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.8);

      .main {
        width: 7.07rem;
        // height: 8.42rem;
        background: #FFF;
        border-radius: 0.2rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;

        .title {
          width: 6.67rem;
          line-height: 1.08rem;
          border-bottom: 1px solid rgba(230, 230, 230, 1);
          margin: 0 auto 60px auto;
          font-size: 16px;
          font-weight: 500;
          position: relative;

          i {
            color: #000;
            position: absolute;
            left: 15px;
            font-size: 18px;
            top: 30px;
          }
        }

        .pay-item {
          width: 6.13rem;
          height: 1.58rem;
          margin: 60px auto;
        }

        .pay-ali {
          background: url('./img/alipay.png');
          background-size: 100% 100%;
        }

        .pay-libao {
          background: url('./img/libao.png');
          background-size: 100% 100%;
        }

        .pay-wx {
          background: url('./img/wx.png');
          background-size: 100% 100%;
        }
      }
    }
  }

  .mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;

    .main {
      width: 7.04rem;
      height: 6.94rem;
      background: #FFF;
      border-radius: 0.2rem;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;

      .title {
        .iconfont {
          position: absolute;
          left: 15px;
          font-size: 20px;
        }

        width: 6.63rem;
        height: 1rem;
        line-height: 1rem;
        font-size: 16px;
        border-bottom: 1px solid rgba(137, 137, 137, 1);
        margin: 0 auto;
      }

      p {
        width: 5.5rem;
        margin: 0.2rem auto 0 auto;
        text-align: left;
        line-height: 0.66rem;

        label {
          color: rgba(255, 105, 51, 1);
        }

        input {
          width: 100%;
          height: 0.66rem;
          background: rgba(215, 215, 215, 1);
          border-radius: 6px;
          padding-left: 0.2rem;
        }

        span {
          font-size: 12px;
          color: rgba(137, 137, 137, 1);
        }

        input::placeholder {
          color: #fff;
        }
      }

      .pmt {
        margin-top: 1rem;
      }

      .maskbtn {
        width: 6.18rem;
        height: 1rem;
        line-height: 1rem;
        background: linear-gradient(-42deg, rgba(249, 71, 1, 1), rgba(250, 81, 5, 1), rgba(253, 110, 17, 1));
        box-shadow: 0px 3px 9px 0px rgba(91, 24, 0, 0.47);
        border-radius: 0.1rem;
        margin: 0 auto;
        color: #fff;
        font-size: 18px;
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
</style>
